<%@ Page Title="Trail details" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="trail-details.aspx.cs" Inherits="UI_trail_details" %>

<%@ Register src="../userControls/ctrl-large-viewgallery.ascx" tagname="ctrl" tagprefix="uc1" %>

<%@ Register src="../Controls/GMap.ascx" tagname="GMap" tagprefix="uc2" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<script type="text/javascript" src="../js/jquery.jcarousel.pack.js"></script>
<script src="../js/Trail.js" type="text/javascript"></script>
<!-- InstanceBeginEditable name="head" -->

<script language="javascript" type="text/javascript">
    function mycarousel_initCallback(carousel) {
        // Disable autoscrolling if the user clicks the prev or next button.
        carousel.buttonNext.bind('click', function() {
            carousel.startAuto(0);
        });

        carousel.buttonPrev.bind('click', function() {
            carousel.startAuto(0);
        });

        // Pause autoscrolling if the user moves with the cursor over the clip.
        carousel.clip.hover(function() {
            carousel.stopAuto();
        }, function() {
            carousel.startAuto();
        });
    };

    jQuery(document).ready(function() {
    jQuery('.first-and-second-carousel').jcarousel({
        scroll: 1,
        
        initCallback: mycarousel_initCallback
    });
    
    });
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<asp:Label ID="lblMsg" runat="server" CssClass="error"></asp:Label>
<table width="960" border="0" cellpadding="5" cellspacing="0">
    <tr>
        <td align="left" valign="middle"><asp:Label ID="ltrPageTitle" runat="server" CssClass="arial_heading_font_blue_16" Text="Trail&nbsp;Title"></asp:Label></td>
        <td align="left" valign="middle"  class="arial__big_heading_font"><asp:Literal ID="ltrTrailTitle" runat="server"></asp:Literal>&nbsp;</td>
    </tr>
</table>
<table width="960" border="0" cellpadding="5" cellspacing="0">
    <tr>
        <td align="center" valign="middle">                
           <asp:HyperLink ID="hprViewMap" runat="server" CssClass="links" Text="Click to edit the trail"></asp:HyperLink>                
        </td>
    </tr>
    <tr>
        <td>
             <table border="0">
                <tr>
                    <td valign="top"><uc1:ctrl ID="ctrl_Trail"  runat="server" /></td>
                    <td valign="top"><div style="margin-top:6px;"><uc2:GMap ID="GMap1" runat="server" Width="425"  Height="360" ViewMode="true" /></div></td>
                </tr>
             </table>   
        </td>
    </tr>
</table>
<table width="960" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="527" align="left" valign="top">
                        
            <table width="350" border="0" cellspacing="0" cellpadding="0" style="margin-left:15px;">
                  <tr>
                    <td width="8" height="8" align="left" valign="top"><asp:Image ID="img77" runat="server" ImageUrl="~/images/box/white/round_box_top_left.png" Width="8" Height="8" /></td>
                    <td height="8" align="left" valign="top" style="background-color: White;"><asp:image ID="im87" runat="server" ImageUrl="images/box/white/round_box_top_repeater.png" Width="1" Height="8" /></td>
                    <td width="8" height="8" align="left" valign="top"><asp:Image ID="img23" runat="server" ImageUrl="~/images/box/white/round_box_top_right.png" Width="8" Height="8" /></td>
                  </tr>
                  <tr>
                    <td width="8" align="left" valign="top" style="background-color: White;"><asp:Image ID="img98" runat="server" ImageUrl="~/images/box/white/round_box_left-08.png" Width="8" Height="2" /></td>
                    <td align="left" valign="top" bgcolor="#FFFFFF"><table width="320" border="0" cellspacing="0" cellpadding="0">
                        <tr>
                          <td align="left" valign="top" class="arial_heading_font_blue_16 dotted_bottom_line"><span class="error">*</span>Trail Details</td>
                        </tr>
                        <tr>
                          <td align="left" valign="top">&nbsp;</td>
                        </tr>
                        <tr>
                          <td align="left" valign="top">
                          <div style="padding:0px 10px; text-align:left; font-size:11px; line-height:20px;" >
                              <table width="450" border="0" cellspacing="0" cellpadding="0">          
                                  <tr>
                                      <td align="left" valign="top"  class="arial__big_heading_font"><asp:Literal ID="ltrTrailName" runat="server"></asp:Literal>&nbsp;</td>
                                  </tr>
                                  <tr>
                                    <td align="left"><span class="labelstyle" >Location:</span>&nbsp;<asp:Label ID="lblLOcation" CssClass="labelstyleBold" runat="server"></asp:Label>  
                                    </td>
                                </tr>
                                <tr>
                                    <td align="left"><span class="labelstyle" >GPS Coordinates:</span>&nbsp;<asp:Label ID="lblCoordinates" CssClass="labelstyleBold" runat="server"></asp:Label>  
                                    </td>
                                </tr>
                                <tr>
                                    <td align="left"><span class="labelstyle" >Type of trail:</span>&nbsp;<asp:Label ID="lblType" CssClass="labelstyleBold" runat="server"></asp:Label>  
                                    </td>
                                </tr>
                                <tr>
                                    <td align="left"><span class="labelstyle" >Length:</span>&nbsp;<asp:Label ID="lblLength" CssClass="labelstyleBold" runat="server"></asp:Label>  
                                    </td>
                                </tr>
                                <tr>
                                    <td align="left"><span class="labelstyle" >Uploaded by:</span>&nbsp;<asp:HyperLink ID="lblUploaded" CssClass="links" runat="server"></asp:HyperLink>  
                                    </td>
                                </tr>
                                <tr>
                                    <td align="left"><span class="labelstyle" >Trail&nbsp;description:</span>&nbsp;<asp:Label ID="lblTrailDescription" CssClass="labelstyleBold" runat="server"></asp:Label>  
                                    </td>
                                </tr>
                                <tr>
                                    <td align="left"><span class="labelstyle" >Number&nbsp;of&nbsp;waypoints:</span>&nbsp;<asp:Label ID="lblWaypointsCount" CssClass="labelstyleBold" runat="server"></asp:Label>  
                                    </td>
                                </tr>
                                <tr>
                                    <td align="left"><span class="labelstyle" >Number&nbsp;of&nbsp;images:</span>&nbsp;<asp:Label ID="lblImagesCount" CssClass="labelstyleBold" runat="server"></asp:Label>  
                                    </td>
                                </tr>

                                <tr>
                                    <td align="left">
                                        &nbsp;</td>
                                </tr>
                             </table>
                          </div>
                          </td>
                        </tr>
                        <tr>
                          <td align="left" valign="top">&nbsp;</td>
                        </tr>
                    </table></td>
                    <td width="8" align="right" valign="top" style="background-color: White;"><asp:Image ID="img61" runat="server" ImageUrl="images/box/white/right.png" Width="8" Height="2" /></td>
                  </tr>
                  <tr>
                    <td width="8" height="8" align="left" valign="top"><asp:Image id="img41" runat="server" ImageUrl="~/images/box/white/round_box_bottom_left.png" Width="8" Height="8" /></td>
                    <td height="8" align="left" valign="top" style="background-color: White;"><asp:Image ID="img51" runat="server" ImageUrl="~/images/box/white/round_box_bottom_repeater.png" Width="1" Height="8" /></td>
                    <td width="8" height="8" align="left" valign="top"><asp:Image id="img32" runat="server" ImageUrl="~/images/box/white/round_box_bottom_right.png" Width="8" Height="8" /></td>
                  </tr>
                </table> 
            <br />
            <table width="515" border="0" cellspacing="0" cellpadding="0" style="margin-left:15px;">
            <tr>
                <td align="left">
                    <asp:HyperLink ID="hlShareTrail" runat="server" CssClass="links" 
                        Target="_blank">Share this trail with friend</asp:HyperLink>
                </td>
            </tr>
            <tr>
                <td align="left" class="arial__big_heading_font"><br />
                </td>
            </tr>
            <tr>
                <td align="left" class="arial__big_heading_font"><asp:HyperLink 
                          ID="hlAddPhotos" runat="server" CssClass="form_btn" 
                          NavigateUrl="~/UI/TrailPhotos.aspx" Visible="False">Add Photos</asp:HyperLink>
                </td>
            </tr>
            <%--<tr>
                <td align="left"><asp:Label ID="lblStory" CssClass="labelstyle" runat="server"></asp:Label>  
                </td>
            </tr>--%>
              <tr>
                <td align="left" valign="top">
                    <%--<uc1:ctrl ID="ctrl_Gallery" ViewTrail="false" runat="server" />--%>

       <span class="arial_heading_font_blue_16"> Comments</span> <br />
       <asp:Label ID="lblComments" runat="server" Font-Size="12px"></asp:Label>
        <asp:Repeater ID="rptrTrailComments" runat="server" OnItemDataBound="trailcomment_databound">
          <ItemTemplate>
         <table width="400" border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td align="left" valign="top">
                    <table width="400" border="0" cellspacing="0" cellpadding="0">
                      <tr>
                         <td width="8" height="8" align="left" valign="top"><img src="../images/box/white/round_box_top_left.png" width="8" height="8" /></td>
                         <td height="8" align="left" valign="top" background="../images/box/white/round_box_top_repeater.png"><img src="../images/box/white/round_box_top_repeater.png" width="1" height="8" /></td>
                         <td width="8" height="8" align="left" valign="top"><img src="../images/box/white/round_box_top_right.png" width="8" height="8" /></td>
                       </tr>
                       <tr>
                         <td width="8" align="left" valign="top" background="../images/box/white/round_box_left-08.png"><img src="../images/box/white/round_box_left-08.png" width="8" height="2" /></td>
                         <td align="left" valign="top" bgcolor="#FFFFFF"><table width="380" border="0" cellspacing="0" cellpadding="0">
                             <tr>
                               <td align="center" valign="top"><table width="386" border="0" cellspacing="0" cellpadding="2">

                       <tr>
                         <td align="left" valign="top" class="normal_font_11"><asp:Literal ID="ltrComments" runat="server" Text='<%# Eval("Comment") %>'></asp:Literal></td>
                       </tr>

                   </table></td>
                 </tr>
                 <tr>
                   <td align="left" valign="top">&nbsp;</td>
                 </tr>

             </table></td>
             <td width="8" align="right" valign="top" background="../images/box/white/right.png"><img src="../images/box/white/right.png" width="8" height="2" /></td>
           </tr>
           <tr>
             <td width="8" height="8" align="left" valign="top"><img src="../images/box/white/round_box_bottom_left.png" width="8" height="8" /></td>
             <td height="8" align="left" valign="top" background="../images/box/white/round_box_bottom_repeater.png"><img src="images/box/white/round_box_bottom_repeater.png" width="1" height="8" /></td>
             <td width="8" height="8" align="left" valign="top"><img src="../images/box/white/round_box_bottom_right.png" width="8" height="8" /></td>
           </tr>
         </table></td>
       </tr>
       <tr>
         <td align="right" valign="top">
       <span style="margin-right:150px;"><asp:LinkButton ID="lnkDelete" runat="server" Visible="false" CssClass="links" CommandArgument='<%# Eval("Id") %>' Text="Delete" OnClick="btnDelete_click" OnClientClick="javascript:return confirm('Are you sure you want to delete it?');"></asp:LinkButton>  </span>
       <img src="../images/box/white/corner.png" style="float:right; margin-right:30px; padding:" alt=""  />  <span class="arial_bold_font_simple" style="margin:5px 10px;" class="links" ><asp:HyperLink ID="Literal1" CssClass="links" runat="server" NavigateUrl='<%# Eval("UserId","~/UI/userDetail.aspx?uid={0}") %>' Text='<%# Eval("username") %>'></asp:HyperLink> </span>                    </td>
       </tr>
    </table>
    </ItemTemplate>
 </asp:Repeater><br /><br />
      <asp:HyperLink ID="hprComments" runat="server" Text="Add Comments" CssClass="links" ></asp:HyperLink>
                </td>
              </tr>
              <tr>
                <td align="left" valign="top" class="normal_font_11"><asp:Literal ID="ltrInformation" runat="server"></asp:Literal></td>
              </tr>
              <tr>
                <td align="left" valign="top">&nbsp;</td>
              </tr>
            </table>
            </td>
            <td width="10" align="left" valign="top">&nbsp;</td>
            <td width="423" align="left" valign="top"><table width="423" border="0" cellspacing="0" cellpadding="0">
             <%-- <tr>
                <td height="30" align="left" valign="top" class="arial_heading_font_blue_16">Search for Trails:</td>
              </tr>
              <tr>
                <td align="center" valign="top"> <table width="420" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="7" height="40" align="left" valign="middle"><img src="../images/search_bar/search_bar_left.png" width="7" height="40" /></td>
            <td align="left" valign="middle" background="../images/search_bar/search_bar_repeater.png">              
              <asp:TextBox ID="txtSearchTrail" runat="server" Font-Size="16px" Width="98%" BorderColor="#FFFFFF" BorderStyle="Solid" BorderWidth="1px"></asp:TextBox>
                        </td>
            <td width="55" height="40" align="left" valign="middle"><asp:ImageButton ID="btnSearchGo" runat="server" OnClick="btnSearchGo_click" ImageUrl="../images/search_bar/search_bar_go_btn.png" Width="55" Height="40" border="0" /></td>
          </tr>
        </table></td>
              </tr>--%>
              <tr>
                <td align="left" valign="top" style="font-weight:bold;" class="arial_heading_font_blue_16"><br /><br />&nbsp;Waypoints</td>
              </tr>
              <tr>
                <td align="left" valign="top"><table width="420" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td width="8" height="8" align="left" valign="top"><img src="../images/box/white/round_box_top_left.png" width="8" height="8" /></td>
                    <td height="8" align="left" valign="top" background="../images/box/white/round_box_top_repeater.png"><img src="../images/box/white/round_box_top_repeater.png" width="1" height="8" /></td>
                    <td width="8" height="8" align="left" valign="top"><img src="../images/box/white/round_box_top_right.png" width="8" height="8" /></td>
                  </tr>
                  <tr>
                    <td width="8" align="left" valign="top" background="../images/box/white/round_box_left-08.png"><img src="../images/box/white/round_box_left-08.png" width="8" height="2" /></td>
                    <td align="left" valign="top" bgcolor="#FFFFFF"><table width="400" border="0" cellspacing="0" cellpadding="0">
                      <tr>
                        <td align="center" valign="top">
                        <uc1:ctrl ID="ctrl_Gallery" ViewTrail="false" runat="server" />
                        <%--<asp:Repeater ID="rptrTrails" runat="server" OnItemDataBound="rptrTrails_DataBound">
                            <ItemTemplate>
                                <table width="100%" border="0" cellspacing="0" cellpadding="2" style="background-color:#EAEAEA;">
                                  <tr>
                                    <td align="left" valign="top" class="normal_font_bold"><asp:Literal ID="ltrTrailName" runat="server" Text='<%# Eval("Name") %>'></asp:Literal></td>
                                  </tr>
                                  <tr>
                                    <td align="left" valign="top" class="normal_font_11"><asp:Literal ID="ltrTrailInformation" runat="server" Text='<%# Eval("TripStory") %>'></asp:Literal></td>
                                  </tr>
                                  <tr>
                                    <td align="right" valign="top"><span class="normal_font_blue_link_11"><asp:Literal ID="ltrDataAdded" runat="server" Text='<%# Eval("TripDate") %>'></asp:Literal></span>
                                    <span class="normal_font_blue">&nbsp;| </span><span class="normal_font_blue_link_11"> visit <asp:Literal ID="ltrNoOfViews" runat="server" Text='<%# Eval("VisitCount") %>'></asp:Literal> times</span></td>
                                  </tr>
                                </table>
                            </ItemTemplate>
                            <AlternatingItemTemplate>
                                <table width="100%" border="0" cellspacing="0" cellpadding="2">
                                  <tr>
                                    <td align="left" valign="top" class="normal_font_bold"><asp:Literal ID="ltrTrailName" runat="server" Text='<%# Eval("Name") %>'></asp:Literal></td>
                                  </tr>
                                  <tr>
                                    <td align="left" valign="top" class="normal_font_11"><asp:Literal ID="ltrTrailInformation" runat="server" Text='<%# Eval("TripStory") %>'></asp:Literal></td>
                                  </tr>
                                  <tr>
                                    <td align="right" valign="top"><span class="normal_font_blue_link_11"><asp:Literal ID="ltrDataAdded" runat="server" Text='<%# Eval("TripDate") %>'></asp:Literal></span>
                                    <span class="normal_font_blue">&nbsp;| </span><span class="normal_font_blue_link_11"> visit <asp:Literal ID="ltrNoOfViews" runat="server" Text='<%# Eval("VisitCount") %>'></asp:Literal> times</span></td>
                                  </tr>
                                </table>
                            </AlternatingItemTemplate>
                        </asp:Repeater>--%>
                        </td>
                      </tr>                      
                      <%--<tr>
                        <td align="left" valign="top">&nbsp;</td>
                      </tr>--%>

                    </table></td>
                    <td width="8" align="right" valign="top" background="../images/box/white/right.png"><img src="../images/box/white/right.png" width="8" height="2" /></td>
                  </tr>
                  <tr>
                    <td width="8" height="8" align="left" valign="top"><img src="../images/box/white/round_box_bottom_left.png" width="8" height="8" /></td>
                    <td height="8" align="left" valign="top" background="../images/box/white/round_box_bottom_repeater.png"><img src="../images/box/white/round_box_bottom_repeater.png" width="1" height="8" /></td>
                    <td width="8" height="8" align="left" valign="top"><img src="../images/box/white/round_box_bottom_right.png" width="8" height="8" /></td>
                  </tr>
                </table></td>
              </tr>
              <tr>
                <td align="left" valign="top">&nbsp; </td>
              </tr>
            </table></td>
          </tr>
        </table>
</asp:Content>

